<template>
  <demoBlock title="基础用法" padding>
    <vcu-input
      v-model="inputValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <vcu-popup v-model:show="show" round position="bottom">
      <vcu-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </vcu-popup>
  </demoBlock>
</template>
<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const show = ref(false);
    const inputValue = ref("");
    const cascaderValue = ref("");
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = [
      {
        text: "浙江省",
        value: "330000",
        children: [{ text: "杭州市", value: "330100" }],
      },
      {
        text: "江苏省",
        value: "320000",
        children: [{ text: "南京市", value: "320100" }],
      },
    ];
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      inputValue.value = selectedOptions.map((option) => option.text).join("/");
    };

    return {
      show,
      options,
      onFinish,
      inputValue,
      cascaderValue,
    };
  },
});
</script>
